<template>
	<view class="mainBody">
		<!-- 订单详情 -->
		<view class="orderDetails">
			<view class="topTitle">
				<view class="orderDetail">订单详情</view>
				<image v-if="currentDate.result==1" class='personStatus' src="../../static/index/shenpi.png"></image>
				<image v-if="currentDate.result==2" class='personStatus' src="../../static/index/yibohui.png"></image>
				<image v-if="currentDate.result==3" class='personStatus' src="../../static/index/yitongguo.png"></image>
				<image v-if="currentDate.result==4" class='personStatus' src="../../static/index/yichehui.png"></image>
				<image v-if="currentDate.result==5" class='personStatus' src="../../static/index/yiquxiao.png"></image>
			</view>
			<!-- 机票超标 -->
			<view v-if="currentDate.businessType=='机票超标'" class="travelMessage">
				<view class="dateTime">2022-05-09 周一</view>
				<view class="travleTime">
					<view class="timeStyle">19:30</view>
					<view class="middleClass">
						<view class="timeLength">2h15m</view>
						<view class='rightBorder'></view>
					</view>
					<view class="timeStyle">21:45</view>
				</view>
				<view class="fromTo">
					<view class="addItem">北京首都机场T2</view>
					<view class="addItem">上海虹桥机场T1</view>
				</view>
				<view class="flightInfo">
					<view class="imgView">
						<image class='flightIcon' src="../../static/travelService/jipiao.png"></image>
					</view>
					<view class="flightName">东航MU5124</view>
					<view class="flightType">空客32L(中)</view>
				</view>
				<view class="priceView">
					<view class="price">¥5,690.00</view>
					<view class="priceDetail" @click="toDetail()">
						<view class="details">费用明细</view>
						<view class="iconView">
							<image class='detailIcon' src="../../static/index/xiala.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 火车票超标 -->
			<view v-if="currentDate.businessType=='火车票超标'" class="travelMessage">
				<view class="dateTime">2022-05-09 周一</view>
				<view class="travleTime">
					<view class="timeStyle">19:30</view>
					<view class="middleClass">
						<view class="traniNo">G102</view>
						<view class='rightBorder'></view>
						<view class="timeText">2h15m</view>
					</view>
					<view class="timeStyle">21:45</view>
				</view>
				<view class="fromTo deletePadding">
					<view class="addItem">北京南</view>
					<view class="addItem rightItem">广州东</view>
				</view>
			</view>
			<!-- 酒店超标 -->
			<view v-if="currentDate.businessType=='酒店超标'" class="hotelView">
				<view class="htlName">广州锦江大酒店 (长江路店)</view>
				<view class="startTime">入住时间：2022-06-24 周五 14:00后</view>
				<view class="endTime">
					<view>离店时间：2022-06-26 周日 12:00前</view>
					<view class="endTimeRight">共2晚</view>
				</view>
			</view>
		</view>
		<!-- 乘机人 -->
		<view v-if="currentDate.businessType=='机票超标'" class="passenger">
			<view class="title">乘机人</view>
			<view class="userView" v-for="(ite,ind) in 2" :key="ind">
				<view class="uName">安佳慧</view>
				<view class="uMessage">
					<view class="uMessLeft">身份证</view>
					<view class="uMessRight">13**** **** **** **89</view>
				</view>
				<view class="uMessage">
					<view class="uMessLeft">手机号</view>
					<view class="uMessRight">182 2839 2321</view>
				</view>
			</view>
		</view>
		<!-- 乘车人 -->
		<view v-if="currentDate.businessType=='火车票超标'" class="passenger">
			<view class="title">乘车人</view>
			<view class="userView" v-for="(item,index) in 2" :key='index'>
				<view class="uName uNameView">
					<view class="">安家汇</view>
					<view class="uNamRight">16车厢 05F号</view>
				</view>
				<view class="seat">
					<view class="">一等座 ¥1,207.20</view>
				</view>
				<view class="uMessage">
					<view class="uMessLeft">身份证</view>
					<view class="uMessRight">13**** **** **** **89</view>
				</view>
				<view class="uMessage">
					<view class="uMessLeft">手机号</view>
					<view class="uMessRight">182 2839 2321</view>
				</view>
			</view>
		</view>
		<!-- 房间信息 -->
		<view class="hotelMess">
			<view class="title">房间信息</view>
			<view class="hotelItem" v-for="(item,index) in 2" :key='index'>
				<view class="room">
					<view>房间一 (共2人)</view>
					<view class="roomPrice">¥607.20</view>
				</view>
				<view class="people" v-for="(item,index) in 2" :key='index'>
					<view class="uname">安佳慧</view>
					<view class="IDCard">
						<view>身份证</view>
						<view class="cardId">13**** **** **** **89</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 联系人 -->
		<view class="linkMan">
			<view class="title">联系人信息</view>
			<view class="linkManView">
				<view class="uMessage">
					<view class="uMessLeft">身份证</view>
					<view class="uMessRight">13**** **** **** **89</view>
				</view>
				<view class="uMessage">
					<view class="uMessLeft">手机号</view>
					<view class="uMessRight">182 2839 2321</view>
				</view>
			</view>
		</view>
		<!-- 超标申请原因 -->
		<view class="applyReason">
			<view class="reaLeft">超标申请原因</view>
			<view class="iconView">
				<image class='detailIcon' src="../../static/index/xiala.png"></image>
			</view>
		</view>
		<!-- 超标+特殊说明 -->
		<view class="applyReason specialInstructions">
			<view class="reaLeft">超标+特殊说明</view>
			<view class="iconView">
				<image class='detailIcon' src="../../static/index/xiala.png"></image>
			</view>
		</view>
		<!-- 申请单信息 -->
		<view class="applyReason applicationInfo">
			<view class="reaLeft">申请单信息</view>
			<view class="iconView">
				<image class='detailIcon' src="../../static/index/xiala.png"></image>
			</view>
		</view>
		<!-- 审批流程 -->
		<view class="approvalProcess">
			<view class="title">审批流程</view>
			<!-- 本人提交 -->
			<view class="processMes">
				<view class="porcessItem">
					<view class="itemLeft">
						<image class="typeImg" src="../../static/index/tijiao.png" mode=""></image>
						<view class="messView">
							<view class="nameItem">安家汇 (产品经理)</view>
							<view class="proItem">提交申请</view>
						</view>
					</view>
					<view class="itemRight">2022-04-03 10:22:33</view>
				</view>
			</view>
			<!-- 其它人审批 -->
			<view class="processMes" v-for="(item,index) in approver" :key='index'>
				<view class="porcessItem">
					<view class="itemLeft">
						<image v-if="item.result=='审批通过'" class="typeImg" src="../../static/index/shenpitongguo.png"
							mode=""></image>
						<image v-if="item.result=='审批驳回'||item.result=='取消申请'" class="typeImg"
							src="../../static/index/bohui.png" mode=""></image>
						<image v-if="item.result=='待审批'" class="typeImg" src="../../static/index/shenpizhong.png"
							mode=""></image>
						<view class="leftLine"></view>
						<view class="messView">
							<view class="nameItem">{{item.name}}</view>
							<view class="proItem">{{item.result}}</view>
							<view v-if="item.result=='取消申请'" class='cancelReason'>取消原因，我不想去了</view>
							<view v-if="item.result=='取消申请'" class="cancelLine"></view>
						</view>
					</view>
					<view class="itemRight">{{item.time}}</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomBtnView">
			<view class="submitBtn">立即下单</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.currentDate = JSON.parse(decodeURIComponent(option.item));
			console.log(this.currentDate);
		},
		data() {
			return {
				currentDate: '',
				approver: [{ //审批人列表
					name: '王家和 (主管)',
					time: '2022-04-03 10:22:33',
					result: '审批通过',
				}, {
					name: '成鑫 (部门经理)',
					time: '2022-04-03 10:22:33',
					result: '审批通过',
				}]
			}
		},
		methods: {
			toDetail() {
				console.log("这里是费用明细！");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBody {
		min-height: 100%;
		background: #f7f7f7;
		border-top: 1rpx solid transparent;

		.topTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin-top: 20rpx;
			padding: 0 32rpx;
			height: 92rpx;
			border-bottom: 2rpx solid #e5e5e5;

			.orderDetail {
				font-size: 34rpx;
				color: #333;
				font-weight: 500;
			}

			.personStatus {
				width: 94rpx;
				height: 40rpx;
			}
		}

		.title {
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			padding: 0 32rpx;
			border-bottom: 2rpx solid #e5e5e5;
		}

		.travelMessage {
			padding: 32rpx;
			background: #fff;

			.dateTime {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				padding-bottom: 30rpx;
			}

			.travleTime {
				display: flex;
				justify-content: space-between;

				.timeStyle {
					font-size: 54rpx;
					font-weight: 600;
					color: #000;
				}

				.middleClass {
					position: relative;
					border-bottom: 2rpx solid #c4c4c4;

					.timeLength {
						padding: 33rpx 32rpx 0 34rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 33rpx;
					}

					.rightBorder {
						position: absolute;
						bottom: -4rpx;
						right: 4rpx;
						height: 14rpx;
						width: 8rpx;
						border-right: 2rpx solid #c4c4c4;
						transform: rotate(-45deg);
					}

					.traniNo {
						padding: 33rpx 32rpx 0 34rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
					}

					.timeText {
						position: absolute;
						bottom: -38rpx;
						left: 50%;
						transform: translateX(-50%);
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.fromTo {
				padding-top: 12rpx;
				padding-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				.addItem {
					width: 174rpx;
					height: 33rpx;
					line-height: 33rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}

				.rightItem {
					text-align: right;
				}
			}

			.deletePadding {
				padding-bottom: 0;
			}

			.flightInfo {
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.imgView {
					height: 100%;
					vertical-align: middle;

					.flightIcon {
						width: 32rpx;
						height: 27rpx;
					}
				}

				.flightName {
					height: 37rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					line-height: 37rpx;
					padding-right: 15rpx;
					margin-right: 15rpx;
					border-right: 2rpx solid #C4C4C4;
				}

				.flightType {
					height: 37rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					line-height: 37rpx;
				}
			}

			.priceView {
				display: flex;
				padding-top: 25rpx;

				.price {
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-right: 16rpx;
				}

				.priceDetail {
					display: flex;

					.details {
						height: 42rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						line-height: 42rpx;
						margin-right: 14rpx;
					}

					.iconView {
						height: 100%;
						vertical-align: baseline;

						.detailIcon {
							width: 28.46rpx;
							height: 16.35rpx;
						}
					}

				}
			}
		}

		.hotelView {
			padding: 30rpx 32rpx 20rpx 32rpx;
			background: #fff;

			.htlName {
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
				padding-bottom: 24rpx;
			}

			.startTime {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}

			.endTime {
				padding-top: 12rpx;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;

				.endTimeRight {

					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.passenger {
			margin-top: 20rpx;
			background: #fff;

			.userView {
				padding: 30rpx 32rpx 0;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.uName {
					height: 48rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #333333;
					line-height: 48rpx;
				}

				.uNameView {
					display: flex;
					justify-content: space-between;

					.uNamRight {
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.seat {
					padding-top: 24rpx;
					text-align: right;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
				}

				.uMessage {
					padding-top: 24rpx;
					display: flex;
					justify-content: space-between;

					.uMessLeft {
						font-size: 32rpx;
						font-weight: 400;
						color: #666666;
					}

					.uMessRight {}
				}
			}

			.userView:last-child {
				border-bottom: 0;
			}
		}

		.linkMan {
			margin-top: 20rpx;
			background: #fff;
			padding-bottom: 30rpx;

			.linkManView {
				padding: 0 32rpx;

				.uMessage {
					padding-top: 24rpx;
					display: flex;
					justify-content: space-between;

					.uMessLeft {
						font-size: 32rpx;
						font-weight: 400;
						color: #666666;
					}

					.uMessRight {}
				}
			}
		}

		.applyReason {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			background: #fff;
			padding: 0 32rpx;
			border-bottom: 2rpx solid #e5e5e5;

			.reaLeft {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.iconView {
				height: 100%;
				vertical-align: baseline;

				.detailIcon {
					width: 28.46rpx;
					height: 16.35rpx;
				}
			}
		}

		.specialInstructions {
			margin: 0;
			border: 0;
		}

		.applicationInfo {
			border: 0;
		}

		.approvalProcess {
			margin-top: 20rpx;
			background: #fff;
			padding-bottom: 216rpx;

			.processMes {
				padding: 29rpx 32rpx 30rpx 32rpx;

				.porcessItem {
					display: flex;
					justify-content: space-between;

					.itemLeft {
						display: flex;

						.typeImg {
							position: relative;
							top: 8rpx;
							left: 0;
							height: 30rpx;
							width: 30rpx;
							margin-right: 8rpx;
						}

						.leftLine {
							position: relative;
							top: -80rpx;
							left: -24rpx;
							height: 73rpx;
							border-left: 1rpx solid #e5e5e5;
						}

						.messView {
							position: relative;

							.nameItem {
								height: 45rpx;
								line-height: 45rpx;
								font-size: 32rpx;
								color: #333;
							}

							.proItem {
								font-size: 26rpx;
								color: #666;
							}

							.cancelReason {
								margin-top: 16rpx;
								color: #ed3944;
								font-size: 26rpx;
							}

							.cancelLine {
								position: absolute;
								top: 50rpx;
								left: -26rpx;
								height: 73rpx;
								border-left: 1rpx solid #e5e5e5;
							}
						}
					}

					.itemRight {
						padding-top: 8rpx;
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}

		.bottomBtnView {
			position: fixed;
			bottom: 0;
			background: #fff;
			height: 154rpx;
			width: 750rpx;

			.submitBtn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				;
				background: #FFA900;
			}
		}
		.hotelMess{
			margin-top: 20rpx;
			background: #fff;
			.hotelItem{
				padding: 30rpx 32rpx;
				border-bottom: 2rpx solid #E5E5E5;
				.room{
					display: flex;
					justify-content: space-between;
					font-size: 34rpx;
					font-weight: 400;
					color: #333333;
					.roomPrice{
						font-size: 32rpx;
					}
				}
				.people{
					padding-top: 29rpx;
					.uname{
						font-size: 32rpx;
						font-weight: 400;
						color: #333333;
					}
					.IDCard{
						display: flex;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: 400;
						color: #666666;
						padding-top: 24rpx;
						.cardId{
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
			.hotelItem:last-child{
				border-bottom: 0;
			}
		}
	}
</style>
